/**
 * Created by Administrator on 2017\9\19 0019.
 */
import React from 'react';
import template from './../../commonui/template';
import { Link } from 'react-router-dom';
import {Form,Icon,Input,Button,CheckBox,Row,Col,Upload,message} from 'antd';
const FormItem = Form.Item;

class PersonalCenter extends React.Component{
    constructor(props){
        super(props);
        this.state={
            lb:this.props.location.state.lb||'Personal',
            user:this.props.location.state.user
        }
        this.changelb=this.changelb.bind(this);
        this.drawForm=this.drawForm.bind(this);
        this.handleChange=this.handleChange.bind(this);
        this.beforeUpload=this.beforeUpload.bind(this);
        this.avatarChange=this.avatarChange.bind(this);
        this.getBase64=this.getBase64.bind(this);
    }
    handleChange(){
         const data=this.props.form.getFieldsValue();
        /*****ajax 发送更改****/
    }
    changelb(){
        this.setState({
            lb:'Company'
        })
    }
    drawForm(){
        const {getFieldDecorator} = this.props.form;
        if(this.state.lb=='Personal'){
            return (
                <div>
                    <FormItem label="TEL" >{getFieldDecorator('phone',{
                        rules:[{required:true,message:'Please input your phone'}]
                    })(<Input/>)
                    }
                    </FormItem>
                     <FormItem label="Name">{getFieldDecorator('name',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input/>)
                     }
                    </FormItem>
                    <FormItem label="ID">{getFieldDecorator('ID',{
                           rules:[{required:true,message:'Please input your ID'}]
                    })(<Input />)
                    }
                    </FormItem>
                    <FormItem label="E-mail">{getFieldDecorator('email',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input />)
                         }
                    </FormItem>
                </div>
            )
        }else{
            return(
                <div>
                     <FormItem label="Name">{getFieldDecorator('name',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input />)
                     }
                     </FormItem>
                     <FormItem label="Company">{getFieldDecorator('company',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input />)
                     }
                     </FormItem>
                    <FormItem label="TEL" >{getFieldDecorator('phone',{
                        rules:[{required:true,message:'Please input your phone'}]
                    })(<Input />)
                    }
                    </FormItem>
                    <FormItem label="landLine">{getFieldDecorator('landline',{
                                    rules:[{required:true,message:'Please input your ID'}]
                                })(<Input />)
                                }
                    </FormItem>
                    <FormItem label="E-mail">{getFieldDecorator('email',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input />)
                         }
                    </FormItem>
                </div>
            )
        }
    }
    getBase64(img,callback){
        const reader =new FileReader();
        reader.addEventListener('load',()=>callback(reader.result));
        reader.readAsDataURL(img);
    }
    beforeUpload(file){
        const isJPG = file.type ==="image/jpeg";
        if(!isJPG){
            message.error("You can only upload JPG file");
        }
    }
    avatarChange=(info)=>{
        if(info.file.status==="done"){
            this.getBase64(info.file.originFileObj,imageUrl=>this.setState({imageUrl}))
        }
    }


    render(){
        const imageUrl = this.state.imageUrl;
       return(
           <div>
            <div>
                <h3>{this.state.lb}<button onClick={this.changelb}>Change lb</button></h3>
                <div>
                  {/* <Upload
                        className="avatar-uploader"
                        name="avatar"
                        showUploadList={false}
                        action="//jsonplaceholder.typicode.com/posts/"
                        beforeUpload={this.beforeUpload}
                        onChange={this.avatarChange}
                    >
                        {imageUrl?
                            <img src={imageUrl} alt="useravater" className="avatar"/>:
                            <Icon type="plus" className="avatar-upload-trigger"/>
                        }
                    </Upload>*/}
                    {/*<Upload
                    className="avatar-uploader"
                    name="avatar"
                    showUploadList={false}
                    action="//jsonplaceholder.typicode.com/posts/"
                    beforeUpload{beforeUpload}
                    onChange={this.handleChange}
                    >
                        {
                          imageUrl ?
                            <img src={imageUrl} alt="" className="avatar" /> :
                            <Icon type="plus" className="avatar-uploader-trigger" />
                        }
                    </Upload>*/}
                </div>
            </div>
            <div>
                <Form  onSubmit={this.handleChange}>
                    {this.drawForm()}
                    <button  type="submit" htmlType="submit">Change</button>
                </Form>
            </div>
        </div>
       )
    }
}

const UsrCenter =Form.create()(PersonalCenter);
export default template({
    id: 'UsrCenter',
    component: UsrCenter
});